import React, { Component } from "react";

/*
  事件传参
    1. 使用内联的bind的方式 this.xxx.bind(this, 2)
      bind还会产生一个新的函数，会将bind的第二个参数，作为新函数的第一个参数
      并且新函数不会立马调用
      不推荐，增加内存

    2. 使用内联的箭头函数 () => this.xxx(3)
      里层自执行，外面套一层
      不推荐， 增加内存, 工作中用的最多的方式

    3. 柯里化函数 curry
      闭包，一个函数返回另外一个函数
      外层函数已经被执行了，点击的时候调用里层函数
      推荐
*/

class App extends Component {
  // handleClick = (num) => {
  //   console.log(num);
  // };

  // handleClick = (num) => {
  //   return () => {
  //     console.log(num);
  //   };
  // };
  handleClick = (num) => (e) => {
    console.log(num);
    console.log(e);
  };

  render() {
    return (
      <>
        <h2>event事件传参</h2>
        {/* <button onClick={this.handleClick.bind(this, 2)}>btn</button> */}
        {/* <button onClick={() => this.handleClick(3)}>btn</button> */}
        <button onClick={this.handleClick(3)}>btn</button>
      </>
    );
  }
}

export default App;
